<template>
  <div class="p-20">
    <el-alert type="success" effect="dark" :closable="false"
      >ElementPlus框架没有瀑布流组件，这里使用<a class="link" href="https://github.com/heikaimu/vue3-waterfall-plugin">
        vue-waterfall-plugin-next<Link /> </a
      >插件代替</el-alert
    >
    <div style="min-height: 150px" element-loading-background="rgba(0,0,0,0)" v-loading="loading">
      <Waterfall :list="waterfallDatas" :gutter="20" :width="280">
        <template #default="{ item, url, index }">
          <div class="card">
            <div class="good-card tile-card p-20">
              <el-image :src="item.pic" fit="cover" />
              <div class="good-name">{{ item.name }}</div>
              <div class="good-desc">
                <el-space wrap>
                  <el-tag :type="tag" v-for="tag in item.tags">{{ tag }}</el-tag>
                </el-space>
              </div>
              <div class="good-desc">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur in at corporis ullam numquam nihil
                expedita architecto adipisci atque? Reprehenderit eveniet quam accusantium adipisci autem, quia quaerat
                eius dolor repudiandae?
              </div>
              <div class="shop">Comic Plus自营店 <Right /></div>
            </div>
          </div>
        </template>
      </Waterfall>
      <div class="no-more" v-if="waterfallDatas.length > 0">没有更多了...</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getDatas } from '@/mocks/data';
import { Right, Link } from '@icon-park/vue-next';
import { ref } from 'vue';
import { Waterfall } from 'vue-waterfall-plugin-next';
import 'vue-waterfall-plugin-next/dist/style.css';

const waterfallDatas = ref([]);

function _getWaterDatas() {
  loading.value = true;
  getDatas().then((res) => {
    waterfallDatas.value = res.data;
    loading.value = false;
  });
}

const loading = ref(false);

_getWaterDatas();
</script>

<style scoped lang="scss">
.good-card {
  .el-image {
    width: 100%;
    height: 180px;
    border-radius: inherit;
  }

  .good-name {
    padding: 0 4px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 700;
  }
  .good-desc {
    color: #999999;
    font-size: 12px;
    margin-top: 10px;
  }

  .shop {
    margin-top: 10px;
    text-align: right;
    font-size: 12px;
    color: #999999;
    cursor: pointer;

    &:hover {
      color: var(--el-color-primary);
    }
  }
}

.no-more {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-top: 20px;
}
.waterfall-list {
  background-color: transparent;
}
</style>
